<template>
    <!-- 提示弹窗 -->
    <uni-popup ref="popup" :mask-click="false">
        <div class="container">
            <image class="title-image" src="https://ustatic.hudongmiao.com/miao/activity/202505/hongbao3.png"
                mode="scaleToFill"></image>
            <scroll-view class="container-scroll" scroll-y enable-flex :show-scrollbar="false">
                <div class="title"><text class="title-text">活动简介</text></div>
                <text class="intro-text">1.2025嗨喵五一欢乐赛暨专精特新企业专板上板庆典盛大开启：iPhone16手机等豪礼，让活动更精彩!</text>
                <div class="lottery-content">
                    <div class="lottery-items">
                        <div class="lottery-item" v-for="(imgPath, index) in IMGLIST" :key="index">
                            <image class="image" :src="imgPath.img"></image>
                            <text class="text">{{ imgPath.text }}</text>
                        </div>
                    </div>
                </div>
                <text
                    class="intro-text">2.为庆祝嗨喵科技成为上海股权交易所专精特新专板上板企业，开启000365幸运数字抽奖活动，时间为4月25日-5月1日，定时发放幸运红包，详情见活动首页。</text>
                <text class="intro-text">3.本次“赛事庆典”主赛事活动时间:2025年4月25日18点-5月31日24点，请知悉。</text>
            </scroll-view>
            <div class="i-know" @click="close">
                <text class="text">我知道了</text>
            </div>
        </div>
    </uni-popup>
</template>

<script setup lang="ts">

const IMGLIST = [
    {
        img: 'https://ustatic.hudongmiao.com/miao/activity/202505/reward-1.png',
        text: 'iPhone 16 Pro'
    },
    {
        img: 'https://ustatic.hudongmiao.com/miao/activity/202505/reward-2.png',
        text: 'DJI Mini 4 Pro'
    },
    {
        img: 'https://ustatic.hudongmiao.com/miao/activity/202505/reward-3.png',
        text: 'Watch Series 10'
    },
    {
        img: 'https://ustatic.hudongmiao.com/miao/activity/202505/reward-4.png',
        text: '华为WATCH GT-5'
    },
    {
        img: 'https://ustatic.hudongmiao.com/miao/activity/202505/reward-5.png',
        text: 'Airpods 4耳机'
    },
    {
        img: 'https://ustatic.hudongmiao.com/miao/activity/202505/reward-6.png',
        text: '马智宇司仪宝'
    },
    {
        img: 'https://ustatic.hudongmiao.com/miao/activity/202505/reward-7.png',
        text: '京东商城300元E卡'
    },
    {
        img: 'https://ustatic.hudongmiao.com/miao/activity/202505/reward-8.png',
        text: '嗨喵名师课程'
    },
    {
        img: 'https://ustatic.hudongmiao.com/miao/activity/202505/reward-9.png',
        text: '嗨喵定制礼包'
    },

]

const popup = ref<UniHelper.UniPopupInstance>();

/** 弹窗打开 */
const open = () => {
  if (!popup.value?.open) return;
  popup.value?.open();
};

/** 弹窗关闭 */
const close = () => {
  if (!popup.value?.close) return;
  popup.value?.close();
  emit('popupClose');
};

defineExpose({
  open,
  close,
});

const emit = defineEmits<{(event: 'clickRule'): void,
  (event: 'popupClose'): void
}>();

</script>

<style scoped lang="scss">
.container {
    position: relative;

    width: 90vw;
    max-height: 80vh;
    transform: translateY(10vh);

    background: #FFFFFF;
    box-shadow: 0px 7 19px 0px rgba(0, 0, 0, 0.3);
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    padding: 22rpx 16rpx 24rpx;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    .container-bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;

        width: 100%;
        height: 100%;
    }

    .container-scroll {
        max-height: 60vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .title-image {
        position: absolute;
        top: -160rpx;
        z-index: 100;
        width: 409rpx;
        height: 194rpx;
    }

    .title {
        background-image: url("https://ustatic.hudongmiao.com/miao/activity/202505/titleBg.png");
        background-size: 565rpx 90rpx;
        width: 565rpx;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .title-text {
            font-weight: 700;
            font-size: 45rpx;
            color: #FFFFFF;
            line-height: 65rpx;
            text-align: justify;
            font-style: normal;
            text-transform: none;
            margin-bottom: 10rpx;
        }
    }

    .intro-text {
        margin-top: 20rpx;
        width: 565rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
        line-height: 37rpx;
        text-align: justify;
        font-style: normal;
        text-transform: none;
    }

    .lottery-content {
        width: 565rpx;
        height: 653rpx;
        background-image: url("https://ustatic.hudongmiao.com/miao/activity/202505/contentBg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-top: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .lottery-items {
            width: 507rpx;
            height: 591rpx;
            background: #FFFBDD;
            border-radius: 15rpx 15rpx 15rpx 15rpx;

            display: grid;
            grid-template-columns: repeat(3, auto);
            grid-template-rows: repeat(3, auto);
            column-gap: 27rpx;
            row-gap: 9rpx;
            padding: 10rpx 10rpx 10rpx 10rpx;
            .lottery-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .image {
                    width: 131rpx;
                    height: 131rpx;
                    background-color: #FFFFFF;
                }

                .text {
                    width: 131rpx;
                    height: 30rpx;
                    font-weight: 400;
                    font-size: 15rpx;
                    background-color: #FF990F;
                    color: #fff;
                    line-height: 30rpx;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }
    }

    .i-know {
        margin-top: 20rpx;
        width: 319rpx;
        height: 95rpx;
        background-image: url("https://ustatic.hudongmiao.com/miao/activity/202505/yellowButton2.png");
        background-size: 319rpx 95rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .text {
            font-weight: 500;
            font-size: 34rpx;
            color: #FFFFFF;
            line-height: 49rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }

}
</style>
